<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .swiper-wrapper {
            position: relative;
            width: 800px;
            height: 500px;
            margin: 100px auto;
            overflow: hidden;
        }

        .swiper-wrapper .swiper {
            position: absolute;
            left: 0;
            top: 0;
            width: 700%;
            height: 100%;
        }

        .swiper-wrapper .swiper .slide {
            float: left;
            width: 800px;
            height: 100%;
        }

        .swiper-wrapper .swiper .slide img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .swiper-wrapper .arr {
            position: absolute;
            left: 0;
            top: 50%;
            display: block;
            width: 36px;
            height: 72px;
            margin-top: -36px;
            font-size: 20px;
            line-height: 72px;
            text-align: center;
            background-color: #333;
            opacity: .3;
            text-decoration: none;
        }

        .swiper-wrapper .arr:hover {
            opacity: 1;
            color: #fff;
        }

        .swiper-wrapper .arr.arr-right {
            left: auto;
            right: 0;
        }

        .dotlist {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: fit-content;
            height: 30px;
        }

        .dotlist .dot {
            float: left;
            width: 20px;
            height: 20px;
            background-color: rgba(0, 0, 0, .3);
            border: 4px solid transparent;
            border-radius: 50%;
            box-sizing: border-box;
            margin: 0 10px;
        }

        .dotlist .dot a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .dotlist .dot.act {
            background-color: #fff;
            border-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="swiper-wrapper">
        <ul class="swiper">
            <li class="slide"><img src="img/宋轶.jpg" alt="" id="1"></li>
            <li class="slide"><img src="img/张佳宁.jpg" alt=""></li>
            <li class="slide"><img src="img/程潇.jpg" alt=""></li>
            <li class="slide"><img src="img/古力娜扎.jpg" alt=""></li>
            <li class="slide"><img src="img/郑秀晶.jpg" alt=""></li>
            <li class="slide"><img src="img/鞠婧祎.jpg" alt=""></li>
            <li class="slide"><img src="img/宋轶.jpg" alt=""></li>
        </ul>
        <ul class="dotlist">
            <li class="dot act"><a href="javascript:;"></a></li>
            <li class="dot"><a href="javascript:;"></a></li>
            <li class="dot"><a href="javascript:;"></a></li>
            <li class="dot"><a href="javascript:;"></a></li>
            <li class="dot"><a href="javascript:;"></a></li>
            <li class="dot"><a href="javascript:;"></a></li>
        </ul>
        <!-- href="javascript:;" 阻止a标签的跳转 -->
        <a href="javascript:;" onclick="goNext(false)" class="arr arr-left">&lt;</a>
        <a href="javascript:;" onclick="goNext(true)" class="arr arr-right">&gt;</a>
        <script src="js/Animate.js"></script>
    </div>
    <script>
        var wrapper = document.querySelector('.swiper-wrapper');
        var swiper = document.querySelector('.swiper');
        var slide = document.querySelectorAll('.slide');
        var aArr = document.querySelectorAll('.dot a');

        console.log(aArr);
        var liW = wrapper.offsetWidth;
        var count = 0;

        // 打开页面自动轮播
        var timer = setInterval(function () {
            count++;
            if (count == slide.length) {
                count = 0;
                count++;
                swiper.style.left = 0;
            }
            target = -1 * liW * count;
            actt()
            easeAnimate(swiper, target)
        }, 3000)


        // 上下轮播
        function goNext(isRight) {
            if (isRight) {
                count++;
                if (count == slide.length) {
                    swiper.style.left = 0;
                    count = 1;
                }
            } else {
                count--;
                if (count == -1) {
                    swiper.style.left = -1 * (slide.length - 1) * liW + 'px';
                    count = slide.length - 2;
                }
            }
            actt()
            var target = -1 * count * liW;
          
            easeAnimate(swiper, target);
        }

        // 触摸轮播
        for (var i = 0; i < aArr.length; i++) {
            aArr[i].index = i
            aArr[i].onmouseover = function () {
                for (var j = 0; j < aArr.length; j++) {
                    var item = aArr[j].parentNode;
                    item.classList.remove('act');
                }
                this.parentNode.classList.add('act');
                target = this.index * liW * -1
                count = this.index;
                easeAnimate(swiper, target);
            }
        }


        // 判斷是否加act標籤
        function actt() {
            for (var j = 0; j < aArr.length; j++) {
                var item = aArr[j].parentNode;
                item.classList.remove('act');
            }
            if (count != slide.length - 1) {
                aArr[count].parentNode.classList.add('act');
            } else {
                aArr[0].parentNode.classList.add('act');
            }
        }
    </script>
</body>

</html>